<template>
  <div class="col-md-3 col-lg-2 ">
            <div class="panel" :class="{'panel-danger':state==2,'panel-warning':state==1,'panel-success':state==0}">
                <div class="panel-heading clearfix">
                    <span class="h2">
                        {{item.tab_num}}
                        <small class="small"> 号桌 </small>
                    </span>
                    <button v-if='state==2' @click="showDeskInfo" class="btn btn-default pull-right details">用餐情况</button>
                    <hr />
                    <p>{{state_text}}</p>
                    <p v-html= "time_text"></p>
                    <div class="clearfix">
                    <button v-if='state==2' @click="order" class="btn btn-default pull-left">加菜</button>
                    <button v-if='state==2' @click="settle" class="btn btn-default pull-right">结账</button>
                    <button v-if='state==1' @click="closeDesk" class="btn btn-default pull-left">关桌</button>
                    <button v-if='state==1' @click="order" class="btn btn-default pull-right">点菜</button>
                    <button v-if="state==0" @click="openDesk" class="btn btn-default pull-right">开桌</button>
                    </div>
                </div>
            </div>
        </div>
</template>
<script>
import { openWindow } from "@/static/js/utils";
export default {
  name: "DeskItem",
  props: {
    item: Object
  },
  data() {
    return {
      name: "147"
    };
  },
  methods: {
    openDesk() {
      const data = {
        id: this.item.id,
        modalName: "openDeskModel"
      };
      this.$emit("openModal", data);
    },
    closeDesk() {
      const data = {
        id: this.item.id,
        order_id: this.item.order.order_id
      };
      this.$emit("closeDesk", data);
    },
    showDeskInfo() {
      const data = {
        id: this.item.id,
        order_id: this.item.order.order_id,
        modalName: "deskInfoModal"
      };
      this.$emit("openModal", data);
    },
    /**
     * 点菜
     */
    order() {
      openWindow("order.html", this.item.tab_num + "号桌", {
        desk_id: this.item.id,
        order_id: this.item.order.order_id,
        tab_num: this.item.tab_num
      });
    },
    /**
     * 结账
     */
    settle() {
      openWindow("Settlement.html", this.item.tab_num + "号桌", {
        order_id: this.item.order.order_id,
        desk_id: this.item.id,
        tab_num: this.item.tab_num
      });
    }
  },
  computed: {
    state() {
      return parseInt(this.item.state);
    },
    state_text() {
      let text = this.item.state_text;
      if (this.state == 1) {
        text += ` / ${this.item.order.nums} 人`;
      }
      if (this.state == 2) {
        text += `${this.item.order.nums} 人 / ￥${this.item.order.price}`;
      }
      return text;
    },
    time_text() {
      let text = "";
      if (this.state == 1 || this.state == 2) {
        text = `用餐时间 ${this.item.order.eat_time}分`;
      } else {
        text = "&nbsp;";
      }
      return text;
    }
  }
};
</script>
<style>

</style>

